<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>选项卡</title>
	<link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
</head>
<body style="padding:30px;">
<h1>选项卡结构及样式</h1>
<p class="note"><em>note:部分选项卡头部结构和样式可参考导航页面,头部的底边以选项卡内容部分为准</em></p>

<h2>选项卡一</h2>
<p class="note"><em>note:选项卡头部单项之间边框不重叠,和父元素的边框也不重叠</em></p>
<style type="text/css">
/* s:.tab_container_1 */
.tab_container_1 .tab_hd { position: relative; width: 800px; margin-bottom: -1px;}
.tab_container_1 .tab_hd ul { padding-left: 10px;}
.tab_container_1 .tab_hd li { float:left; width: 80px; margin-right: 5px; font-size:14px; text-align:center; border-top:1px solid #666; border-right:1px solid #666; border-left:1px solid #666;}
.tab_container_1 .tab_hd li a { display:inline-block; width:100%; height:23px; color: #fff; background-color: #0f7cbf; line-height: 23px;}
.tab_container_1 .tab_hd .cur a,.tab_container_1 .tab_hd li a:hover { height: 24px; color: #000; background-color: #fff; border-color: #000;}
.tab_container_1 .tab_bd div { width: 700px; height: 200px; border: 1px solid #150DC9;}
</style>
<div class="tab_container_1">
  <div class="tab_hd">
    <ul class="clrfix">
      <li><a href="">首页</a></li>
      <li class="cur"><a href="">拍卖会</a></li>
      <li><a href="">本地生活</a></li>
      <li><a href="">会员俱乐部</a></li>
      <li><a href="">facebook</a></li>
    </ul>
  </div>
  <div class="tab_bd">
	    <div id="bd1">bd1</div>
	    <div id="bd2" style="display:none;">bd2</div>
	    <div id="bd3" style="display:none;">bd3</div>
	    <div id="bd4" style="display:none;">bd4</div>
	    <div id="bd5" style="display:none;">bd5</div>
  </div>
</div>
<div class="item">
  <p>html:</p>
  <code>
    <pre>
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
    </pre>
  </code>
</div>



<h2>选项卡二</h2>
<p class="note"><em>note:选项卡头部单项背景切换,单项之间的border重叠,选中项的border颜色高亮</em></p>
<style type="text/css">
/* s:.tab_container_2 */
.tab_container_2 .tab_hd { position: relative; width: 800px; margin-bottom: -1px;}
.tab_container_2 .tab_hd ul { padding-left: 10px;}
.tab_container_2 .tab_hd li { float:left; width: 80px; margin-right: -1px; font-size:14px; text-align:center; border-top:1px solid #666; border-right:1px solid #666; border-left:1px solid #666;}
.tab_container_2 .tab_hd .cur { position: relative; border-color: #000;}
.tab_container_2 .tab_hd li a { display:inline-block; width:100%; height:23px; color: #fff; background-color: #0f7cbf; line-height: 23px;}
.tab_container_2 .tab_hd .cur a,.tab_container_2 .tab_hd li a:hover { height: 24px; color: #000; background-color: #fff;}
.tab_container_2 .tab_bd div { width: 700px; height: 200px; border: 1px solid #150DC9; }
</style>
<div class="tab_container_2">
  <div class="tab_hd">
    <ul class="clrfix">
      <li><a href="">首页</a></li>
      <li class="cur"><a href="">拍卖会</a></li>
      <li><a href="">本地生活</a></li>
      <li><a href="">会员俱乐部</a></li>
      <li><a href="">facebook</a></li>
    </ul>
  </div>
  <div class="tab_bd">
	    <div id="bd1">bd1</div>
	    <div id="bd2" style="display:none;">bd2</div>
	    <div id="bd3" style="display:none;">bd3</div>
	    <div id="bd4" style="display:none;">bd4</div>
	    <div id="bd5" style="display:none;">bd5</div>
  </div>
</div>
<div class="item">
  <p>html:</p>
  <code>
    <pre>
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
    </pre>
  </code>
</div>
<h2>选项卡三</h2>
<p class="note"><em>note:选项卡头部单项背景切换,有border和background属性;单项和父元素以及单项之间的border重叠,选中项的border颜色高亮</em></p>
<style type="text/css">
/* s:.tab_container_3 */
.tab_container_3 .tab_hd { position: relative; width: 800px; height: 25px; margin-bottom: -1px;}
.tab_container_3 .tab_hd ul { border-top: 1px solid #666; border-right: 1px solid #666; padding-bottom: 23px; background-color: #ccc;}
.tab_container_3 .tab_hd li { float:left; margin-top: -1px; width: 80px; margin-right: -1px; font-size:14px; text-align:center; border-top:1px solid #666; border-right:1px solid #666; border-left:1px solid #666;}
.tab_container_3 .tab_hd .cur { position: relative; border-color: #000;}
.tab_container_3 .tab_hd li a { display:inline-block; width:100%; height:23px; color: #fff; background-color: #0f7cbf; line-height: 23px;}
.tab_container_3 .tab_hd .cur a,.tab_container_3 .tab_hd li a:hover { height: 24px; color: #000; background-color: #fff;}
.tab_container_3 .tab_bd div { width: 700px; height: 200px; border: 1px solid #150DC9;}
</style>
<div class="tab_container_3">
  <div class="tab_hd">
    <ul>
      <li><a href="">首页</a></li>
      <li class="cur"><a href="">拍卖会</a></li>
      <li><a href="">本地生活</a></li>
      <li><a href="">会员俱乐部</a></li>
      <li><a href="">facebook</a></li>
    </ul>
  </div>
  <div class="tab_bd">
	    <div id="bd1">bd1</div>
	    <div id="bd2" style="display:none;">bd2</div>
	    <div id="bd3" style="display:none;">bd3</div>
	    <div id="bd4" style="display:none;">bd4</div>
	    <div id="bd5" style="display:none;">bd5</div>
  </div>
</div>
<div class="item">
  <p>html:</p>
  <code>
    <pre>
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
    </pre>
  </code>
</div>




</body>
</html>